class Slider{
    static Example() {
        return new Slider({
            banner_list:[{
                img: 'https://www.17sucai.com/preview/2381258/2021-07-13/css3%E4%BB%8B%E7%BB%8D%E5%88%87%E6%8D%A2/imgs/1.jpg',
                tag: '我是小标题—',
                title: '美丽的建筑',
                desc: "2我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述",
                note: '查看详情',
                url: 'http://www.baidu.com'
            },{
                img: 'https://www.17sucai.com/preview/2381258/2021-07-13/css3%E4%BB%8B%E7%BB%8D%E5%88%87%E6%8D%A2/imgs/2.jpg',
                tag: '我是小标题—',
                title: '水乡之城市',
                desc: "2我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述我是描述 我是描述",
                note: '查看详情',
                url: 'http://www.baidu.com'
            }]
        });
    }
    constructor(parameter) {
        this._banner_list = parameter.banner_list;
        this._index = 0;
        this._all_unm = this._banner_list.length;
        this.id = OtherUtils.RandomId('slider');

        $('body').append(`<div id="${this.id}" class="main-group">
        <div class="left-group">
            <img src="" alt="">
        </div>
        <div class="right-group">
            <div class="info-group">
                <div class="tag"></div>
                <div class="title"></div>
                <div class="desc"></div>
                <div class="note">
                    <a href="">查看详情</a>
                </div>
            </div>
            <div class="control-group">
                <div class="icon-group">
                    <i class="icon left-icon"></i>
                    <i class="icon right-icon"></i>
                </div>
                <div class="show-index-group">
                    <span class="self-index">1</span> / <span class="all-num">12</span>
                </div>
            </div>
        </div>
    </div>`);

        this._left_img = $('#' + this.id + ' .left-group img');
        this._info_group = $('#' + this.id + ' .right-group .info-group');
        this._tag_div = $('#' + this.id + ' .right-group .tag');
        this._title_div = $('#' + this.id + ' .right-group .title');
        this._desc_div = $('#' + this.id + ' .right-group .desc');
        this._note_div = $('#' + this.id + ' .right-group .note');
        this._left_btn = $('#' + this.id + ' .right-group .left-icon');
        this._right_btn = $('#' + this.id + ' .right-group .right-icon');
        this._self_index_div = $('#' + this.id + ' .right-group .self-index');
        this._all_num_div = $('#' + this.id + ' .right-group .all-num');

        this._add_html();
        this._add_event();
    }
    _sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time*1000));
    }
    // (async function() {
    //     await sleep(1);
    // })();
    _add_html (){
        let this_data = this._banner_list[this._index];

        this._all_num_div.html(this._all_unm);
        this._left_img.attr('src', this_data.img);
        this._tag_div.html(this_data.tag);
        this._title_div.html(this_data.title);
        this._desc_div.html(this_data.desc);
        this._note_div.html('<a href="'+this_data.url+'">'+this_data.note+'</a>');
        this._up_next_btn();
    }
    _show_next(){
        let that = this;
        let this_index = this._index;
        let this_data = this._banner_list[this_index];
        (async function() {
            that._self_index_div.html(this_index+1);

            //　开始先动画消失掉
            that._left_img.css({left:'-250px', opacity: 0});
            that._info_group.css('opacity', 0);
            that._tag_div.css({'margin-left':'460px'})
            await that._sleep(0.1);
            that._title_div.css({'margin-left':'460px'})
            await that._sleep(0.1);
            that._desc_div.css({'margin-left':'460px'})
            await that._sleep(0.1);
            that._note_div.css({'margin-left':'460px'})
            await that._sleep(0.2);
            // 替换数据
            that._left_img.attr('src', this_data.img);
            that._tag_div.html(this_data.tag);
            that._title_div.html(this_data.title);
            that._desc_div.html(this_data.desc);
            that._note_div.html('<a href="'+this_data.url+'">'+this_data.note+'</a>');
            await that._sleep(0.04);
            // 动画切换回来
            that._left_img.css({left:'0', opacity: 1});
            that._info_group.css('opacity', 1);
            that._tag_div.css({'margin-left':'0'})
            await that._sleep(0.1);
            that._title_div.css({'margin-left':'0'})
            await that._sleep(0.1);
            that._desc_div.css({'margin-left':'0'})
            await that._sleep(0.1);
            that._note_div.css({'margin-left':'0'})
            await that._sleep(0.2);
        })();
        this._up_next_btn();
    }

    _up_next_btn(){
        this._left_btn.removeClass('left-icon-no');
        this._right_btn.removeClass('right-icon-no');
        if(this._index<=0){
            //左侧变为不可点
            this._left_btn.addClass('left-icon-no');
        }
        if(this._index>=this._all_unm-1){
            //右侧变为不可点
            this._right_btn.addClass('right-icon-no');
        }
    }

    _add_event(){
        let that = this;
        this._left_btn.click(function(){
            if(that._index>0){
                that._index -= 1;
                that._show_next();
            }
        });
        this._right_btn.click(function(){
            if(that._index<that._all_unm-1){
                that._index += 1;
                that._show_next();
            }
        });
    }
}
